<template>
  <div :class="['modul-article', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="content" v-for="(item, index) in essay" :key="item.data_id" @click="goDesc(item.data_id)">
      <div class="title">
        {{ item.title }}
      </div>
      <div class="img-list" v-if="Array.isArray(item.show_url_list)">
        <el-image v-for="(i, index) in item?.show_url_list.slice(0, $ua.isFromPc() ? 4 : 3)" :key="index" :src="i" alt="" fit="cover" />
      </div>
      <div class="foot">
        <span class="name">{{ item.author }}</span>
        <span class="read-count">{{ item.read_count + '人阅读' }}</span>
        <span class="time">{{ item.create_time }}</span>
      </div>
      <div class="line" v-if="!$ua.isFromPc()" />
    </div>
    <div class="look-more" @click="lookMore" v-if="essay.length < essayTotal">
      查看更多
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: ['essay', 'essayTotal'],
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    goDesc(data_id) {
      console.log('进入详情页', data_id)
      this.$router.push({ path: '/dynamic/articleDesc', query: { data_id } })
    },
    lookMore() {
      this.$emit('getEssay')
    }
  }
}
</script>

<style scoped lang="less">
.modul-article {

  &.z-web {
    .content {
      text-align: left;
      cursor: pointer;

      .title {
        font-size: 32px;
        font-weight: 600;
        color: #000000;
        line-height: 37px;
        margin-bottom: 15px;
      }

      .img-list {
        ::v-deep(.el-image) {
          width: 320px;
          height: 240px;
          margin-right: 20px;

          &:last-child {
            margin-right: 0;
          }
        }
      }

      .foot {
        font-size: 16px;
        font-family: Source Han Serif SC;
        font-weight: 600;
        color: #333333;
        line-height: 37px;
        opacity: 0.75;

        span {
          display: inline-block;
          margin-right: 10px;
          margin-top: 16px;
        }
      }
    }
  }

  &.z-phone {
    .content {
      text-align: left;
      .title {
        font-size: pxtorem(32);
        font-weight: 600;
        color: #000;
        margin-bottom: pxtorem(16);
      }
      .img-list {
        ::v-deep(.el-image) {
          width: pxtorem(220);
          height: pxtorem(165);
          margin-right: pxtorem(21);
          margin-bottom: pxtorem(15);

          &:last-child {
            margin-right: 0;
          }
        }
      }

      .foot {
        font-size: pxtorem(22);
        font-weight: 600;
        color: #333;
        opacity: 0.75;
      }

      .line {
        width: 100%;
        height: pxtorem(1);
        margin: pxtorem(32) 0;
        background-color: #E8E8E8;
      }

      &:last-child {
        .line {
          display: none;
        }
      }
    }
  }
}
</style>
